﻿@model SmartParking.Web.Models.ReservationsModel

@{
    ViewBag.Title = "Reservaciones";
    var modelAsJSON = new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
}

@section HeaderScripts {
    <script src="../../scripts/json2.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/jquery-ui-git.css" />
    <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
    <script src="http://www.malsup.com/jquery/block/jquery.blockUI.js"></script>
    @*<link rel="stylesheet" href="~/content/css/showLoading.css" />
    <script src="~/scripts/jquery.showLoading.js"></script>*@
    <script type="text/javascript" src="~/scripts/smartparking.js"></script>

    <script type='text/javascript'>
        $(document).ready(function() {
            window.MVJSON = @modelAsJSON;

            $(function() {
                $("#tboxDate").datepicker({
                    showOn: "button",
                    buttonImage: "../content/images/calendar.png",
                    buttonImageOnly: true,
                    minDate: 0,
                    maxDate: "+1M +15D",
                    dateFormat: "dd/mm/yy"
                });
                $("#anim").change(function() {
                    $("#tboxDate").datepicker("option", "showAnim", $(this).val());
                });
            });
        });

        //$(".cmdReserve").live("click", function(){
        $(document).on("click", "#cmdReserve", null, function() {
            var url = "@Url.Action("Reserve")";
            doReserve(window.MVJSON.Reservation, url);
        });

        $(document).on("click", "#cmdDelete", null, function() {
            var id = $(this).parent().attr('id').replace("row-", "");
            var url = "@Url.Action("Delete")" + "/" + id;
            doDelete(url, id);
        });

        $(document).on("change", "#ddlParking", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParking(window.MVJSON.Reservation, url);
            $("#ddlParkingZone").empty();
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
        });

        $(document).on("change", "#ddlParkingZone", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParkingZone(window.MVJSON.Reservation, url);
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
            $("#tboxDate").focus();
        });

        $(document).on("change", "#ddlStartHour", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectStartHour(window.MVJSON.Reservation, url);
        });

        $(document).on("change", "#ddlEndHour", null, function() {
            $("#tboxCarPlate").focus();
        });

        $(document).on("change", "#chboxTerms", null, function() {
            $("#cmdPayPal").css('visibility', $("#chboxTerms").is(':checked') ? 'visible' : 'hidden');
        });
    </script>
    }

    <div class="template_container">
        <div class="template_container_top">
            <p>
                <img src="~/content/media/img/paso1.jpg" alt="Paso #1" width="527" height="119"/>
            </p>
            <div class="template_container_top_left">
                <div id="plParkingInfo" class="panel" style="width: 260px;">
                    <fieldset>
                        <legend>Información del Parqueo</legend>
                        <div>                        
                            @Html.LabelFor(model => model.Reservation.ParkingId,
                                           new {style = "display:inline-block;width:50px;"})
                            @Html.DropDownList("ddlParking", Model.Reservation.Parkings,
                                               new {style = "width:175px;"})
                            @Html.LabelFor(model => model.Reservation.ParkingZoneId,
                                           new {style = "display:inline-block;width:50px;"})
                            @Html.DropDownList("ddlParkingZone", Model.Reservation.ParkingZones,
                                               new {style = "width:175px;"})
                            <span id="lbPriceHourAndComission" style="visibility: hidden;">Precio/Hora: [$PHXXX] + [$CXXX] comisión</span>
                        </div>
                    </fieldset>                
                </div>
            </div>
            <div class="template_container_top_right">
                <div id="plReservationInfo" class="panel" style="width: 275px">
                    <fieldset>
                        <legend>Información de Reservación</legend>
                        <div>
                            @Html.LabelFor(model => model.Reservation.Date,
                                           new {style = "display:inline-block;width:35px;"})
                            @Html.TextBox("tboxDate", Model.Reservation.Date,
                                          new {style = "width:60px;", disabled = "disabled"})
                            @Html.LabelFor(model => model.Reservation.StartHour,
                                           new {style = "display:inline-block;width:40px;"})
                            @Html.DropDownList("ddlStartHour", Model.Reservation.OpenHours,
                                               new {style = "width:75px;"})
                            @Html.LabelFor(model => model.Reservation.CarPlate,
                                           new {style = "display:inline-block;width:35px;"})
                            @Html.TextBox("tboxCarPlate", Model.Reservation.CarPlate,
                                          new {style = "width:60px;", title = "# Placa del Carro"})
                            @Html.LabelFor(model => model.Reservation.EndHour,
                                           new {style = "display:inline-block;width:40px;margin-left:19px"})
                            @Html.DropDownList("ddlEndHour", Model.Reservation.CloseHours,
                                               new {style = "width:75px;"})
                            <div style="text-align: center; height: 26px;">
                                <input id="cmdReserve" type="image" title="Reservar" alt="Reservar" style="border-width: 0px;" src="~/Content/images/car_add.png"/>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
        <div class="template_container_bottom">
            <div id="reservationsCart">
                @Html.Partial("ReservationsList", Model.Reservations)
            </div>
            @*<input type="image" id="cmdTestPaypal" title="Test" alt="Test" style="border-width:0px;" src="~/Content/images/car_add.png"/>*@
            @*<div id="myPayPalCart"></div>*@
            <br/>
            <form action="@SmartParking.Bussiness.PayPalSettings.PaymentUrl" id="frmPayPal" method="post">
                <input id="cmdPayPal" type="image" src='@SmartParking.Bussiness.PayPalSettings.PayPalPayNowButtonUrl' align="right" style="margin-right: 7px; visibility: hidden" alt="PayPal - The safer, easier way to pay online!">
            </form>
        </div>    
    </div>
